{% extends '/pg/index.html' %}
{% block operation %}

<ul class="breadcrumb">
  <li><a href="/pg">Home</a></li>
  <li><a href="/pg/abbinamenti">Abbinamenti</a></li>
  <li class="active">Categoria - Campo</li>
</ul>
        <div class="field text tdSez" title=""><b>Seleziona una categoria su cui operare</b></div>

<form class="form-horizontal" id="ae_form" action="/pg/cu_CategoriaCampo/Create" method="post" role="form">
        <input type="hidden" name="ordine" id="ordine" />
    <div class="form-group">
        <label class="col-sm-2 col-lg-2 control-label" for="id_categoria" >Categoria:</label>
        <div class="col-sm-5 col-lg-5">
            <select style="height:40px;width:200px;" id="id_categoria" name="id_categoria" class="validate[required]" >
                <option value=""></option>
                {% for t in pageData['categorie'] %}
                        <option value="{{t.id}}" >{{t.denominazione}}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="form-group" title="">
        <input class="btn btn-default" type="button" id="revert" value="Annulla ultimo spostamento" name="annulla ultimo spostamento"/>
    </div>


<div class="form-group" style="border: 2px solid #e7e7e7;">
    <div class="col-sm-5 col-lg-5" >
        <ul id="sortable1" class="connectedSortable">
        </ul>
    </div>
  <div class="col-sm-5 col-lg-5" >
<ul id="sortable2" class="connectedSortable" >
</ul>
</div></div>

    <div class="form-group" title="Bottoni di salvataggio e reset del form">
        <input class="btn btn-primary" type="button" id="salva" value="Salva" name="add"/>
    </div>
</form>

{%endblock%}
{% block custom_js %}
<!--
<link rel="stylesheet" type="text/css" href="/tpl/pg/js/plugins/multi-select-master/css/multi-select.css" />
-->
<!--
<script src="/tpl/pg/js/plugins/multi-select-master/js/jquery.multi-select.js" ></script>
-->
<script type="text/javascript">
$(document).ready(function () {
$("#ae_form").validationEngine({
                    prettySelect : true,
                    useSuffix: "_chosen",});
$(".Preview").hide()
$("a#anteprima").hide()
$(".Edit_dao").hide()
$( "#id_categoria" ).chosen({
                    disable_search:true,
                    allow_single_deselect: true})

 $( "#sortable1, #sortable2" ).sortable({
     placeholder: "ui-state-highlight",
connectWith: ".connectedSortable",
dropOnEmpty: true,
forceHelperSize: true,
forcePlaceholderSize: true,
revert: true
}).disableSelection();

$("#id_categoria").change(function (e) {
    ordine = [];
    var id_categoria = $("#id_categoria").find("option:selected").val();
    //alert(id_role);
       $.getJSON("/pg/cu_CategoriaCampo/GetCategoriaCampo",{id_categoria:id_categoria}, function(data){
           var lis = ""
        $.each( data, function( k, v ){
           lis += '<li class="sorta" id="' + v.id + '" >' + v.denominazione + '</li>';
         });
         $("#sortable2").html(lis);

       });
     $.getJSON("/pg/cu_CategoriaCampo/GetCampi",{id_categoria:id_categoria}, function(data){
       var liss = ""
        $.each( data, function( k, v ){
           liss += '<li class="sorta" id="' + v.id + '" >' + v.denominazione + '</li>';
         });
         $("#sortable1").html(liss);

       });
    });


//$('#id_categoriacampo').multiSelect({
        //keepOrder:true,
        //afterSelect: function(values){
        //ordine.push(values);
        ////alert(values);
        ////alert(ordine);
        //$("#ordine").val(ordine)
        //},
        //afterDeselect: function(values){
        //ordine.splice(ordine.indexOf(values), 1);
        ////alert(ordine);
        //$("#ordine").val(ordine)

        //},
        //});

//$('#id_categoriacampo').multiSelect({ keepOrder: true,
    //});

$("#revert").click( function(e){
        $( ".connectedSortable" ).sortable( "cancel" );
});
$("#salva").click( function(e){
        var sortedIDs = $( "#sortable2" ).sortable( "toArray" );
        $("#ordine").val(sortedIDs)
        $("#ae_form").submit()
});

});
</script>
{% endblock %}
